<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        导入 js 和 element
    -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

    <style>

        .el-row > .el-button {
            margin-bottom: 15px;
        }

        .el-tag{
            text-align: center;
            width: 55px;
            display: inline-block;
        }

    </style>
</head>
<body>

<div id="app">

    <el-input
            placeholder="房间号:"
            prefix-icon="el-icon-search"
            v-model="numbers"
            style="width: 32%;margin-bottom: 15px"
    >
    </el-input>

    <el-button @click="search" type="success"> 搜索</el-button>


    <el-row>

        <el-button  @click="addHouse" type="primary"> 添加</el-button>
        <el-button type="danger"> 多个删除</el-button>

    </el-row>

    <el-table
            ref="arr"
            :data="houses"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="numbers"
                label="房号"
                width="120">
        </el-table-column>

        <el-table-column
                prop="area"
                label="房屋面积"
                width="120">
        </el-table-column>

        <el-table-column
                prop="intoDate"
                label="入住时间"
                width="120">
        </el-table-column>

        <el-table-column
                prop="status"
                label="状态"
        >
            <template slot-scope="scope">
                <el-tag color="#409EFF" size="medium" type="info">{{scope.row.status == '1' ? "入住" : "未入住"}}</el-tag>
            </template>

        </el-table-column>

    </el-table>

    <!--
            @size-change            size发生变化会触发函数    handleSizeChange
            @current-change         当前页码 发生改变会触发的函数  handleCurrentChange
            @page-sizes             分页列表
           :page-size               每页的大小
           :total                  总数
            @  事件绑定
            :  属性绑定
     -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--
       添加的功能的实现:
       01 页面处理
          1. 弹窗
          2.页面布局
          3. 表单 / 其他的表的数据

       02  添加数据

       03  添加成功 数据的更新操作

    -->
    <!--
        el-dialog    对话框
        title        对话框的标题
        visible      是否显示
        width        宽度

         @close="handlerClose"   关闭的时候触发的函数
    -->
    <el-dialog
            title="添加house的dialog"
            :visible.sync="addDialogVisible"
            width="45%"
            @close="handlerClose">

        <el-form ref="house" :model="house" label-width="80px">

            <el-form-item label="房屋编号">
                <el-input v-model="house.numbers"></el-input>
            </el-form-item>

            <el-form-item label="房屋面积">
                <el-input v-model="house.area"></el-input>
            </el-form-item>


            <el-form-item label="所属楼宇">
                    <el-select v-model="house.buildingId" placeholder="请选择所属楼宇">
                    <!--
                        label  文本显示
                        value  提交的值
                    -->
                        <el-option
                                v-for="build in builds"
                                :key="build.id"
                                :label="build.numbers"
                                :value="build.id">
                        </el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="活动时间">
                <el-col :span="11">
                    <!--
                        value-format  提交的时候的数据格式
                    -->
                    <el-date-picker type="date" placeholder="选择日期" v-model="house.intoDate"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="备注信息">
                <el-input type="textarea" v-model="house.remarks"></el-input>
            </el-form-item>

        </el-form>

        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addHouseData"> 添加房屋 </el-button>

    </el-dialog>

</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            numbers: "",
            houses: [],
            arr: [],
            currentPage: 1,
            pageSizes: [2, 3, 4],
            pageSize: 2,
            total: 0,
            addDialogVisible: false,
            house:{},
            builds:[]
        },
        methods: {

            handlerClose(){
                // alert("我dialog关闭了..");
                this.house = {};
            },
            // 添加房屋数据
            addHouseData(){
                axios({
                    method: "POST",
                    url: "http://localhost:8080/house",
                    data:this.house
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000){
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findHouse(this.currentPage, this.pageSize, this.numbers);
                         // 03 关闭dialog
                        this.addDialogVisible = false;
                    }
                })
            },

            addHouse(){
                this.addDialogVisible = true;
            },
            //条件搜索
            search() {
                this.findHouse(this.currentPage, this.pageSize, this.numbers);
            },
            // 改变的 size
            handleSizeChange(val) {
                this.pageSize = val;
                this.findHouse(this.currentPage, this.pageSize, this.numbers);
            },

            //触发改变的currentPage
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findHouse(this.currentPage, this.pageSize, this.numbers);
            },

            /**
             *  :formatter="formatter"
             *  左边是属性绑定     :formatter 列的格式化
             *  右边是格式化函数   formatter
             *
             *  formatter 函数执行完毕后返回的而结果 展示在列里面
             *
             * @param row
             * @returns {string}
             */
            formatter(row) {
                return row.status == 1 ? "入住" : "未入住"
            },
            // 勾选后 会触发函数
            // val 是勾选的数组
            handleSelectionChange(val) {
                this.arr = val;
            },
            findHouse(currentPage, pageSize, numbers) {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/house",
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize,
                        numbers: numbers
                    }
                }).then(resp => {
                    /**
                     *
                     *  resp 是 axios 的回写对象,config/data 等数据
                     *
                     *  我们只关心: data 的数据 : resp.data的数据是 服务器返回的数据
                     *
                     */
                    console.log(resp);
                    console.log(resp.data);  // 拿到服务器的 回写数据
                    console.log(resp.data.data);  // 拿到服务器的 回写数据中的data数据的对象
                    // this.houses = resp.data.data.data; // 拿到服务器的 回写数据中的data数据的对象中data数据
                    this.houses = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            },
            findBuild(){
                axios({
                    method: "GET",
                    url: "http://localhost:8080/building/all",
                }).then(resp => {
                    console.log(resp.data);
                    this.builds = resp.data.data;
                })
            }
        },
        created() {
            this.findHouse(1, 2);
            //查询楼宇信息
            this.findBuild();
        }
    });
</script>

</body>
</html>